<template>
  <div :class="['SmallTitlePanel bor-rad-5px box-shadow-000 mag-b-20',className]">
    <div
      class="titleBox"
      v-if="title"
    >
      <span class="titleName">{{title}}</span>
      <div class="operation flex">
        <span
          class="rightBtn"
          v-if="rightBtn"
          @click="rightBtnClickChild"
        >{{rightBtn}}</span>
      </div>
    </div>
    <div
      class="content"
      ref="content"
    >
      <div
        class="content__inner"
        ref="contentInner"
      >
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// import { throttle } from 'lodash';
import {
  Component, Vue, Prop,
} from 'vue-property-decorator';

@Component({ components: {} })
export default class SmallTitlePanel extends Vue {
  @Prop({ default: null, type: String })
  title!: string;

  @Prop({ default: null, type: String })
  className!: string;

  @Prop({ default: null, type: String })
  rightBtn!: string;

  @Prop({ default: false, type: Boolean })
  edit!: boolean;

  rightBtnClickChild() {
    this.$emit('rightBtnClick', this.title);
  }
}
</script>

<style scoped lang="scss">
.SmallTitlePanel {
  background-color: $color-fff;
  .titleBox {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    height: 0.28rem;
    padding: 0.35rem 0;
    margin: 0 0.15rem;
    border-bottom: 0.02rem solid $color-fafafb;
    &::before {
      position: absolute;
      top: 0.24rem;
      left: 0rem;
      width: 0.06rem;
      height: 0.24rem;
      background-color: $color-oa;
      border-radius: 0.03rem;
      content: "";
    }
    .titleName {
      font-weight: 600;
      font-size: 0.28rem;
      margin-left: 0.12rem;
    }
    .operation {
      align-items: center;
    }
    .rightBtn {
      color: $color-999;
      font-size: 0.2rem;
      cursor: pointer;
    }
  }
}
</style>
